<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <link rel="stylesheet" href="./css/basic.css">
    <style>
        .container {
            width: 50vw;
            height: 200px;
            margin: 20px auto;
            background-color: pink;
            box-sizing: border-box;
            text-align: center;
            line-height: 200px;
            color: #000;
        }
    </style>
</head>
<body>
    <input id="textInput" type="text">
    <div class="container" indedx="0">当前移动:</div>
    <div class="container" index="1">当前移动:</div>
    <div class="container" index="2">当前移动:</div>
    <script>
        document.querySelectorAll(".container").forEach((dom,index)=>{
            let count1 = 0
            let count2 = 0
            let count3 = 0
            dom.addEventListener("mousemove",(event)=>{
                // 这里通过getAttribute 方法获取dom元素的index属性值
                if(dom.getAttribute('index') === 0) {
                    count1++
                    event.target.innerText = `当前移动: + ${count1}`
                    event.target.style.color = 'bule'
                }else if (dom.getAttribute("index") === 1) {
                    count2++
                    event.target.innerText = `当前移动: + ${count2}`
                    event.target.style.color = 'red'
                }else {
                    count3++ 
                    event.target.innerText = `当前移动: + ${count3}`
                }
            })
        })


        // 查找元素document.querySelector(选择器) 选择器是textInput 和 container 
        // 而textInput选择器的前缀是id，所以在querySelector引用时用‘#’，container选择器的前缀是class，所以在querySelector引用时用‘.’
        // addEventListener()是监听器，当监听到textInput发生改变，就会执行回调函数内的代码
        // document.querySelector('#textInput').addEventListener('change',()=>{
            // alert(123)
        // })


        // addEventListener该监听器，监听的事件是input，当在textInput选择器对应的输入框中写入东西时，就会触发回调函数内的代码
        // document.querySelector('#textInput').addEventListener('input',()=>{
            // alert(123)
        // })

        // addEventListener该监听器，监听的事件是keyup,当在该元素从上按下并松开按键时，就会触发对应的事件处理函数
        // 因为下列判断需要使用key和keyCode两种属性，而这两种属性，对应的对象是event，所以在回调函数中调用了event对象
        document.querySelector('#textInput').addEventListener('keyup',(event)=>{
            // 判断回车按键
            if(event.key === 'Enter') {
                // alert('您按下了回车键')
            }
            if(event.keyCode === 13) {
                // alert('您按下了回车键1')
            }
        })

        document.querySelector('#textInput').addEventListener('keydown',()=>{
            alert('按下')
        })
    </script>
</body>
</html>